<template>
  <div style="display: flex;flex-direction: column;">
    <div class="banner" v-if="banner_list.length > 0">
      <el-carousel motion-blur height="auto" >
        <el-carousel-item v-for="item in banner_list" :key="item.imgurl" style="height: 210px">
          <div class="banner-card">
            <img :src="item.imgurl" alt="">
            <img :src="item.imgurl2" alt="">
          </div>
        </el-carousel-item>
        <div class="custom-carousel-indicators"></div>
      </el-carousel>
    </div>
    <div class="tuijiangd">
      <h3 style="margin-top: 0" @click="toPage('/gedan')">推荐歌单 <el-icon><i-bi-arrow-right-short /></el-icon></h3>
      <div class="card-body">
        <div class="background-image" v-for="item in playlist" :style="`background-color: ${item.bgcolor}`">
          <div class="topdiv" :style="`background:${item.gradation}`"  @click="openGd(item.id)"></div>
          <img :src="item.imageUrl" alt="背景图片" class="image" />
          <div class="content">
            <div class="description-container">
              <p class="description">{{ item.name }}</p>
            </div>
            <div class="other-description">
              <ul>
                <li v-for="(song, index) in item.songs" :key="index">{{ index+1 }}. {{ song }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tuijiangd">
      <h3 @click="toPage('/newsongs')">{{ block_songlist.title }} <el-icon><i-bi-arrow-right-short /></el-icon></h3>
      <SongCard :songs="block_songlist.data" :columns="song_column"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  getHomepage,
  topAlbum
} from "@/assets/apis/http";
import ColorExtractor from "@/tools/ColorExtractor";
import { useRouter } from "vue-router";
import { Banner, TuijianGedan, Song } from "@/assets/apis/MusicDataType";
import util from "@/tools/util";

const router = useRouter();
const loading = ref(true);
const banner_list = reactive<Banner[]>([]);
//官方歌单
const playlist = reactive<TuijianGedan[]>([]);
//自定义模块
const block_songlist=reactive({
  title: "标题",
  data: <Song[]>[]
})
const song_column = ref(3)

//获取发现页数据
async function getHomePage() {
  const res = await getHomepage();
  getBanner(res.data.blocks[0].extInfo.banners);
  getTjPlaylist(res.data.blocks[2].creatives);
  // getLikePlaylist(res.data.blocks[3].creatives);
  getNewSongs2(res.data.blocks[3])
}
//轮播图
function getBanner(banners: any[]) {
  let bannerList: Banner[] = [];
  for (let i = 0; i < banners.length; i += 2) {
    const bannerItem = {
      banner1Id: banners[i].bannerId,
      imgurl: util.formatSongsPic(banners[i].pic),
      url: banners[i].url,
      banner2Id: banners[i + 1].bannerId,
      imgurl2: util.formatSongsPic(banners[i + 1].pic),
      url2: banners[i + 1].url
    };
    bannerList.push(bannerItem);
  }
  banner_list.push(...bannerList);
}

//推荐歌单
async function getTjPlaylist(resplaylist: any[]) {
  // 使用 Promise.all 来并行处理每个歌单的颜色提取
  const items = await Promise.all(resplaylist.map(async banner => {
    let coverUrl = util.formatSongsPic(banner.uiElement.image.imageUrl, 200);
    const color = await ColorExtractor.getDominantColor(coverUrl);
    let bgcolor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
    let gradation = `linear-gradient(to bottom, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.2), rgba(${color[0]}, ${color[1]}, ${color[2]}, 1))`;
    let songs = banner.resources.map(res => res.uiElement.mainTitle.title);
    return {
      id: banner.creativeId,
      name: banner.uiElement.mainTitle.title,
      imageUrl: coverUrl,
      bgcolor: bgcolor,
      gradation: gradation,
      songs: songs
    };
  }));
  playlist.splice(0,playlist.length,...items);
}

/**
 * 最新歌曲
 */
async function getNewSongs2(block: any) {
  console.log("自定义模块", block);
  block_songlist.title = block.uiElement.subTitle.title;
  let song_list_new = <Song[]>[];
  let resources = block.creatives;
  for(let i=0;i<resources.length;i++){
    song_list_new.push(...resources[i].resources.map(songItem => {
      const singer = songItem.resourceExtInfo.artists.map(({ name, id }) => ({ name, id }));
      return {
        id: songItem.resourceId,
        name: songItem.uiElement.mainTitle.title,
        mvId: songItem.resourceExtInfo.song.mv,
        albumPic: util.formatSongsPic(songItem.uiElement.image.imageUrl,100),
        album: songItem.resourceExtInfo.songData.album.name,
        singer: singer,
        alia: songItem.uiElement.subTitle?.title ?? '',
        duration: songItem.resourceExtInfo.songData.duration,
        fee: songItem.resourceExtInfo.songData.fee,
        url: "https://music.163.com/song/media/outer/url?id="+songItem.resourceId+".mp3"
      }
    }))
  }
  block_songlist.data = song_list_new;
  console.log("自定义歌曲列表", block_songlist);
}

//新歌速递
async function getNewSongs() {
  const res = await topAlbum({ limit: song_column.value * 3 });
  console.log("新歌速递", res);
  song_list_new.push(...res.weekData.splice(0,song_column.value*3).map(songItem => {
    const singer = songItem.artists.map(({ name, id }) => ({ name, id }));
    return {
      id: songItem.id,
      name: songItem.name,
      mvId: songItem.mvid,
      albumPic: util.formatSongsPic(songItem.picUrl,100),
      album: songItem.name,
      singer: singer,
      alia: songItem.alias[0],
      duration: songItem.duration,
      fee: songItem.fee,
      url: "https://music.163.com/song/media/outer/url?id="+songItem.id+".mp3"
    }
  }))
  console.log("新歌列表", song_list_new);
}

function openGd(id: number) {
  router.push({ path: '/gedan/'+id })
}

function toPage(path:string){
  router.push({ path: path });
}
getHomePage();
// getNewSongs()
</script>

<style scoped lang="scss">
.banner-skeleton {
  margin: 0 20px;
  border-radius: 20px;
  overflow: hidden;
}

.background-image-skeleton {
  position: relative;
  border-radius: 15px;
  aspect-ratio: 1 / 1.25;
  width: 14vw;
  overflow: hidden;
  background-color: var(--el-skeleton-color);
}

.banner {
  .banner-card {
    display: flex;
    gap: 20px;
    justify-content: center;
    border-radius: 20px;

    img {
      width: 38vw;
      border-radius: 20px;
      cursor: pointer;
    }
  }

  :deep(.el-carousel__button) {
    height: 8px;
    border-radius: 5px;
    width: 8px;
  }

  :deep(.el-carousel__indicator.is-active button) {
    opacity: 1;
    width: 16px;
  }
}

.tuijiangd {
  margin: 0 20px;
  h3 {
    color: var(--transparent-5);
    cursor: pointer;
  }
  .card-body {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    .background-image {
      position: relative;
      border-radius: 15px;
      aspect-ratio: 1 / 1.25;
      width: 14vw;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      color: rgb(240, 243, 246);
      cursor: pointer;

      .topdiv {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 75%;
        display: none;
      }

      .image {
        height: 75%;
        width: 100%;
      }

      .title {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 18px;
      }

      .content {
        display: flex;
        transition: transform 0.3s ease;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;

        .description-container {
          overflow: hidden;
          text-align: left;
          font-size: 15px;

          p {
            margin-block-start: 0;
            margin-inline-start: 10px;
            margin-inline-end: 10px;
          }
        }

        .other-description {
          font-size: 12px;
          display: none;

          ul {
            list-style: none;
            padding-inline-start: 12px;
            margin-block-start: 0;

            li {
              text-align: left;
              padding-top: 5px;
            }
          }
        }
      }

      &:hover {
        .content {
          /* 鼠标悬停时上移 */
          transform: translateY(-60px);
        }

        .topdiv {
          display: block;
        }

        .other-description {
          display: block;
        }
      }
    }
  }
}

</style>
